<template>
  <div id="second">
         <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="选择客户"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
>
  <template #right>
    <van-icon name="wap-home-o" size="18" />
  </template></van-nav-bar>
 </header>
 <!-- 搜索框 -->
 <div class="search">
     <van-search
  v-model="value"
  show-action
   shape="round"
  placeholder="请输入关键联系人"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
 </div>
 <!-- 客户列表 -->
 <van-row type="flex"  justify="center" v-for='(item,index) in records' :key='index' @click="changeVal(item)">
  <van-col span="3"><div><img src="../../assets/客户关怀/头像男 拷贝 4.png" alt="" width="100%" > </div></van-col>
  <van-col span="16">&nbsp;&nbsp;{{item.custName}}</van-col>
  <van-col span="3"><van-icon name="arrow"  /></van-col>
</van-row>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
import {cust} from '../../request/api'
export default {
data(){
  return{
        value: '',
         records:[],
         id:''
  }
},
created(){
   cust({
     
        current:'1',
        size:'10'
    }).then(res=>{
       
        this.records=res.data.records
         console.log(this.records);
    })
},
computed:{
       ...mapState({
           num:state=>state.num
       }),
      
    },
methods: {
    onClickLeft() {
      this.$router.push('/addvisit')
    },
    onClickRight(){
      this.$router.push('/login')
    },
        onSearch() {
            
       cust({
       keyword:this.value,
    }).then(res=>{  
       
        this.records=res.data.records
         console.log(this.records);
    })
    },
    changeVal(val){
      this.value=val.custName
        this.id=val.id
      localStorage.setItem('searchVal',this.value)
      localStorage.setItem('searchId',this.id)

      this.$router.push('/addvisit')
    
    }
  },
}
</script>

<style lang='less'>
*{
    font-size: .18rem!important;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title,.van-nav-bar__text{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem!important;
    color: white;
}
     }
    
}
.search{
   .van-search__action{
        color:#003399;
    }
}
.van-row{
   align-items: center; 
   .van-col--3{
       text-align: right;
   }
}
</style>